<template>
	<view class="detail-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" title="内容详情"></uni-navbar></view>

		<view class="detail-info" v-show="willInfo.id">
			<!-- <view class="site-box">
				<view class="p-info">
					<view class="p-name">{{ willInfo.createName }}</view>
					<view class="left"><image class="image" :src="$imagePreview(willInfo.createAvatar)" mode="aspectFill"></image></view>
					<view class="right">
						<view class="p-time">时间：{{ willInfo.createTime }}</view>
						<view class="p-phone">联系电话：{{ willInfo.phone }}</view>
						<view class="p-no">问题编号：{{ willInfo.opinionNo }}</view>
						<view class="p-nick">代表：{{ willInfo.representiveName }}</view>
					</view>
				</view>
				<view class="label-info">
					<view class="item" @click="onTts()">
						<u-icon v-if="!play" class="icon" name="volume-fill" color="#09f" size="40"></u-icon>
						<u-icon v-else class="icon" name="pause-circle-fill" color="#09f" size="40"></u-icon>
						语音播报
					</view>
					<view class="item" @click="call(willInfo)">
						<u-icon class="icon" name="phone-fill" color="#0f0" size="40"></u-icon>
						拨打电话
					</view>
				</view>
			</view> -->
			<view class="form-box">
				<u-form>
					<u-form-item class="form-item" label="提交人">
						<view>{{ willInfo.createName }}</view>
					</u-form-item>

					<u-form-item class="form-item" label="手机号码">
						<view>{{ willInfo.phone }}</view>
					</u-form-item>

					<u-form-item class="form-item" label="发生地点" labelPosition="top">
						<view class="input-text">{{ willInfo.address }}</view>
					</u-form-item>

					<u-form-item class="form-item" label="选择代表">
						<view>{{ willInfo.userName }}</view>
					</u-form-item>

					<u-form-item class="form-item border-bottom" label="选择网格" v-if="willInfo.street">
						<view>{{ willInfo.streetName }}</view>
					</u-form-item>

					<u-form-item class="form-item" label="标题" labelPosition="top" v-if="willInfo.title">
						<view class="input-text">{{ willInfo.title }}</view>
					</u-form-item>
				</u-form>
			</view>
			<view class="info-detail">
				<view class="overflow"><uni-parse :content="willInfo.opinionDescribe"></uni-parse></view>
			</view>
		</view>

		<!-- <view class="uploader-add" @click="onTts">
			<image v-if="!play" src="/static/img/icon_76.png" mode="widthFix"></image>
			<image src="/static/img/icon_77.gif" v-else mode="widthFix"></image>
		</view> -->

		<view class="file-list" v-if="fileList.length > 0">
			<view>附件:</view>
			<view class="file-item" v-for="(item, index) in fileList" :key="index" @click="$showLine(item)">
				<view class="file-name clamp">{{ item.name }}</view>
				<view class="right-type">预览</view>
			</view>
		</view>

		<block v-if="willInfo.nodeStatus == 1 && (willInfo.representiveId == userId || $sysBtns('lx_rddb_shencha'))">
			<view class="com-h2"><text class="text">问题审查</text></view>
			<view class="form-box">
				<u-form :model="form">
					<u-form-item class="form-item" required label="是否受理" prop="idea">
						<u-radio-group v-model="idea" @change="ideaGroupChange" :key="idea">
							<u-radio v-for="(item, index) in ideaList" :key="index" :name="item.name">{{ item.label }}</u-radio>
						</u-radio-group>
					</u-form-item>

					<u-form-item class="form-item" required label="不予受理原因" prop="inadmissible" v-if="idea != '2'">
						<u-checkbox-group v-model="inad" @change="inadGroupChange" :key="inad">
							<u-checkbox v-model="item.checked" v-for="(item, index) in inadList" :name="item.value">{{ item.label }}</u-checkbox>
						</u-checkbox-group>
					</u-form-item>

					<u-form-item class="form-item" label="" labelPosition="top" v-if="idea != '2'">
						<!-- block -->
						<u-input inputAlign="left" v-model="form.inadmissibleText" type="textarea" placeholder="请输入原因" :clearable="false" :height="160" :maxlength="-1" />
					</u-form-item>
				</u-form>
			</view>

			<view class="fiexd-btm"><u-button class="form-btn" type="error" @click="confirm">提交</u-button></view>
		</block>

		<block v-if="willInfo.nodeStatus > 1">
			<view class="com-h2"><text class="text">问题审查</text></view>
			<view class="form-box" v-if="willInfo.nodeStatus != '5'">
				<u-form>
					<u-form-item class="form-item" label="是否受理">
						<view>{{ '已受理' }}</view>
					</u-form-item>
				</u-form>
			</view>
			<view class="form-box" v-else>
				<u-form>
					<u-form-item class="form-item" label="是否受理">
						<view>{{ '不予受理' }}</view>
					</u-form-item>
					<u-form-item class="form-item" label="不予受理原因">
						<view>{{ willInfo.inadmissibleName }}</view>
					</u-form-item>
					<u-form-item class="form-item" label="" labelPosition="top">
						<view class="input-text">{{ willInfo.inadmissibleText }}</view>
					</u-form-item>
				</u-form>
			</view>
		</block>

		<block v-if="willInfo.nodeStatus == 2 && (willInfo.representiveId == userId || $sysBtns('lx_rddb_jiaoban'))">
			<view class="com-h2"><text class="text">问题交办</text></view>
			<view class="form-box">
				<u-form :model="form1">
					<u-form-item class="form-item" required label="问题分类" prop="type">
						<u-input v-model="type" type="select" :select-open="typeShow" placeholder="请选择" @click="typeShow = true" />
						<u-select :list="typeList" v-model="typeShow" @confirm="typeConfirm"></u-select>
					</u-form-item>

					<u-form-item class="form-item" required label="分类明细" prop="classify">
						<u-input v-model="classify" type="select" :select-open="classifyShow" placeholder="请选择" @click="classifyShow = true" />
						<u-select :list="classifyList" v-model="classifyShow" @confirm="classifyConfirm"></u-select>
					</u-form-item>

					<u-form-item class="form-item" required label="交办方式" prop="handle">
						<u-input v-model="handle" type="select" :select-open="handleShow" placeholder="请选择" @click="handleShow = true" />
						<u-select :list="handleList" v-model="handleShow" @confirm="handleConfirm"></u-select>
					</u-form-item>

					<u-form-item class="form-item" required label="问题备注" labelPosition="top" v-if="form1.handlingResulst != '5'">
						<!-- block -->
						<u-input inputAlign="left" v-model="form1.remark" type="textarea" placeholder="请输入" :clearable="false" :height="160" :maxlength="-1" />
					</u-form-item>

					<u-form-item class="form-item" required label="代表之家" v-if="form1.handlingResulst == '5' && !dbzjId">
						<u-input v-model="home" type="select" :select-open="homeShow" placeholder="请选择代表之家" @click="homeShow = true" />
						<u-select :list="homeList" v-model="homeShow" @confirm="homeConfirm"></u-select>
					</u-form-item>
					<u-form-item class="form-item" required label="代表之家" v-if="form1.handlingResulst == '5' && dbzjId">
						<view>{{ dbzjName }}</view>
					</u-form-item>
				</u-form>
			</view>

			<view class="fiexd-btm"><u-button class="form-btn" type="error" @click="confirm1">提交</u-button></view>
		</block>

		<block v-if="willInfo.nodeStatus > 2 && willInfo.nodeStatus != 5">
			<view class="com-h2"><text class="text">问题交办</text></view>
			<view class="form-box">
				<u-form>
					<u-form-item class="form-item" label="问题分类">
						<view>{{ willInfo.opinionClassifyName }}</view>
					</u-form-item>
					<u-form-item class="form-item" label="分类明细">
						<view>{{ willInfo.opinionClassifyChildName }}</view>
					</u-form-item>
					<u-form-item class="form-item" label="交办方式">
						<view>{{ willInfo.handlingResulstName }}</view>
					</u-form-item>
					<u-form-item class="form-item" label="问题备注" labelPosition="top" v-if="willInfo.handlingResulst != '5'">
						<view class="input-text">{{ willInfo.remark }}</view>
					</u-form-item>
				</u-form>
			</view>
		</block>

		<block v-if="willInfo.nodeStatus == 3 && (willInfo.representiveId == userId || $sysBtns('lx_rddb_banjie'))">
			<view class="com-h2"><text class="text">问题办结</text></view>
			<view class="form-box" v-if="willInfo.handlingResulst != 5">
				<u-form :model="form1">
					<u-form-item class="form-item" required label="处理结果" labelPosition="top">
						<!-- block -->
						<u-input inputAlign="left" v-model="form2.remark1" type="textarea" placeholder="请输入" :clearable="false" :height="160" :maxlength="-1" />
					</u-form-item>
				</u-form>
			</view>

			<view class="fiexd-btm" v-if="willInfo.handlingResulst != 5"><u-button class="form-btn" type="error" @click="confirm2">确认</u-button></view>

			<view class="form-box" v-else>
				<u-form>
					<u-form-item class="form-item" label="" labelPosition="top">
						<view class="input-text">{{ '等待码上议事处理' }}</view>
					</u-form-item>
				</u-form>
			</view>
		</block>

		<block v-if="willInfo.nodeStatus > 3 && willInfo.nodeStatus != 5">
			<view class="com-h2"><text class="text">问题办结</text></view>
			<view class="form-box">
				<u-form>
					<u-form-item class="form-item" label="处理结果" labelPosition="top">
						<view class="input-text">{{ willInfo.remark1 || '已经处理' }}</view>
					</u-form-item>
				</u-form>
			</view>
		</block>

		<view v-if="false || fileList"></view>
	</view>
</template>

<script>
import uniFileUpload from '@/components/uni-file-uploader.vue';
import uniParse from '@/components/uni-parse/parse.vue';
import selectTree from '@/components/uni-select-tree.vue';
import { mapState } from 'vuex';
export default {
	components: {
		uniFileUpload,
		uniParse,
		selectTree
	},
	data() {
		return {
			statusMap: {
				0: '所有',
				1: '待审查',
				2: '待交办',
				3: '办理中',
				4: '已办结',
				5: '不予受理'
			},

			home: '',
			homeShow: false,
			homeList: [],

			type: '',
			typeShow: false,
			typeList: [],

			classify: '',
			classifyShow: false,
			classifyList: [],

			handle: '',
			handleShow: false,
			handleList: [],

			idea: '2',
			ideaShow: false,
			ideaList: [
				{
					name: '2',
					value: '2',
					label: '受理'
				},
				{
					name: '5',
					value: '5',
					label: '不予受理'
				}
			],

			inad: [],
			inadShow: false,
			inadList: [],

			id: '',
			userId: '',
			dbzjId: '',
			dbzjName: '',
			status: '1',
			willInfo: {},
			fileList: [],
			form: {
				idea: '2',
				inadmissible: '',
				inadmissibleText: ''
			},
			form1: {
				opinionClassify: '',
				opinionClassifyChild: '',
				handlingResulst: '',
				homeId: '',
				remark: ''
			},
			form2: {
				remark1: ''
			},
			rules: {
				idea: [
					{
						required: true,
						message: '请选择是否受理',
						trigger: 'change'
					}
				],
				inadmissible: [
					{
						required: true,
						message: '请选择不予受理原因',
						trigger: 'change'
					}
				]
			},
			key: -1,
			flag: false,
			play: false
		};
	},
	onLoad(option) {
		this.loadLogin();
		this.id = option.id;
		if (option.status) {
			this.status = option.status;
		}
		this.loadDict('inadmissible', 'inadList');
		this.loadDict('opinionClassify', 'typeList');
		this.loadDict('handlingResulst', 'handleList');

		this.loadRepHome();
		this.loadData();
	},
	onReady() {
		// this.$refs.uForm.setRules(this.rules);
	},
	onHide() {
		this.$ttsOff();
	},
	onUnload() {
		this.$ttsOff();
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.sysUser) {
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.userId = this.userInfo.sysUser.id;
				this.dbzjId = this.userInfo.userInfo.dbzjId;
				this.dbzjName = this.userInfo.userInfo.dbzjName;
				this.roleCodes = this.userInfo.roleCodes.join(',');
			} else {
				this.$logout();
			}
		},
		loadDict(type, list, value) {
			this.$request('/system/sys-dict/dictList', {
				clientCode: this.clientCode,
				sysDict: {
					dictType: type
				}
			}).then((res) => {
				if (!res.data) {
					return false;
				}
				this[list] = [];
				res.data.forEach((item) => {
					this[list].push({
						name: item.dictValue,
						value: item.dictValue,
						label: item.dictName
					});
				});
			});
		},
		loadRepHome() {
			this.$request('/system/sys-dept/getRepHome', {
				pageNum: 1,
				pageSize: 9999,
				userId: this.userId,
				clientCode: this.clientCode
			}).then((res) => {
				if (res.data) {
					// this.homeList = res.data.records;

					res.data.records.forEach((item) => {
						this.homeList.push({
							id: item.id,
							parentId: item.parentId,
							value: item.id,
							label: item.deptName
						});
					});
				}
			});
		},
		loadData() {
			this.$request('/minqingzhitong/msPublicOpinion/get', {
				id: this.id,
				userId: this.userId
			}).then((res) => {
				if (!res.data) {
					this.$msg('暂无数据');
					return false;
				}
				this.fileList = res.data.fileList;
				this.willInfo = res.data.msPublicOpinion;
			});
		},
		inadGroupChange(e) {
			this.inad = e;
			this.form.inadmissible = e.join(',');
		},
		ideaGroupChange(e) {
			this.idea = e;
			this.form.idea = e;
		},
		typeConfirm(e) {
			this.type = e[0].label;
			this.form1.opinionClassify = e[0].value;
			this.loadDict(this.form1.opinionClassify, 'classifyList');

			this.classify = '';
			this.form1.opinionClassifyChild = null;
		},
		classifyConfirm(e) {
			this.classify = e[0].label;
			this.form1.opinionClassifyChild = e[0].value;
		},
		handleGroupChange(e) {
			this.handle = e;
			this.form1.handlingResulst = e;
		},
		handleConfirm(e) {
			this.handle = e[0].label;
			this.form1.handlingResulst = e[0].value;
		},
		homeConfirm(e) {
			this.home = e[0].label;
			this.form1.homeId = e[0].value;
		},
		confirm() {
			let data = {};
			data = {
				id: this.willInfo.id,
				nodeStatus: this.form.idea,
				...this.form
			};

			console.log(data);

			if (!data.idea) {
				this.$msg('请选择处理意见');
				return false;
			}
			if (!data.inadmissible && data.idea != '2') {
				this.$msg('请选择不予受理原因');
				return false;
			}

			let url = '/minqingzhitong/msPublicOpinion/save';
			this.$request(url, data, {
				load: true
			}).then((res) => {
				this.flag = false;
				this.$msg(res.msg);
				this.navigateBack();
			});
		},
		confirm1() {
			let data = {};
			data = {
				id: this.willInfo.id,
				nodeStatus: '3',
				...this.form1
			};

			if (this.dbzjId) {
				data.homeId = this.dbzjId;
				this.form1.homeId = this.dbzjId;
			}

			if (!data.opinionClassify) {
				this.$msg('请选择问题分类');
				return false;
			}
			if (!data.opinionClassifyChild) {
				this.$msg('请选择分类明细');
				return false;
			}
			if (!data.handlingResulst) {
				this.$msg('请选择交办方式');
				return false;
			}

			if (data.handlingResulst != '5') {
				if (!data.remark) {
					this.$msg('请选择问题备注');
					return false;
				}
			} else {
				if (!data.homeId) {
					this.$msg('请选择代表之家');
					return false;
				}
			}

			let data2 = {};
			data2 = {
				clientCode: this.clientCode,
				currentUserId: this.userId,
				classify: this.form1.opinionClassify,
				classifyDetail: this.form1.opinionClassifyChild,
				dbzjDeptId: this.form1.homeId,
				addr: this.willInfo.address,
				contact: this.willInfo.createName,
				content: this.willInfo.opinionDescribe,
				fileList: this.fileList,
				msOtherId: this.willInfo.id,
				phone: this.willInfo.phone,
				title: this.willInfo.title
			};

			let url = '/minqingzhitong/msPublicOpinion/save';
			let url2 = '/msIssueInfo/addFromSlyj';

			this.$request(url, data, {
				load: true
			}).then((res) => {
				this.flag = false;
				this.$msg(res.msg);
				this.navigateBack();
			});

			if (this.form1.handlingResulst == '5') {
				this.$request(url2, data2, {
					load: true
				}).then((res) => {
					console.log(res);
				});
			}
		},
		confirm2() {
			let data = {};
			data = {
				id: this.willInfo.id,
				nodeStatus: '4',
				...this.form2
			};

			if (!data.remark1) {
				this.$msg('请输入处理结果');
				return false;
			}

			let url = '/minqingzhitong/msPublicOpinion/save';
			this.$request(url, data, {
				load: true
			}).then((res) => {
				this.flag = false;
				this.$msg(res.msg);
				this.navigateBack();
			});
		},
		back(e) {
			this.navigateBack();
		},
		navigateBack(e) {
			setTimeout(() => {
				let pre = this.$prePage();
				if (pre && pre.loadData) {
					pre.loadData('refresh');
				}
				uni.navigateBack();
				// this.loadData();
			}, 500);
		},
		call(e) {
			uni.makePhoneCall({
				phoneNumber: e.phone
			});
		},
		onTts() {
			let text = this.willInfo.createName || '';
			text += '，时间：' + this.willInfo.createTime;
			text += '，联系电话：' + this.willInfo.phone;
			text += '，问题编号：' + this.willInfo.opinionNo;
			text += '，代表：' + this.willInfo.representiveName;
			text += '，' + this.willInfo.opinionTypeName;
			text += '，' + this.willInfo.opinionDescribe;
			text += '，发生地点：' + this.willInfo.address;
			this.$tts(text, this, 500);
		},
		previewImage(idx, images) {
			uni.previewImage({
				current: idx,
				urls: images
			});
		}
	}
};
</script>

<style lang="scss">
.detail-view {
	background-color: #fff;
}

.detail-info {
	padding: 0 0 30rpx;

	.overflow {
		padding: 20rpx 30rpx 0;
	}

	.com-box {
		margin-top: 30rpx;
		padding: 10rpx 20rpx;
		font-size: 14px;
		font-weight: 500;
		color: #333;
		line-height: 40rpx;
		border-radius: 36rpx;
		background: #f6f7fb;
	}
}

.site-box {
	padding: 30rpx 30rpx 0;
	background-color: #f5f7fa;
}

.p-info {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 10rpx;
	padding: 26rpx 30rpx 48rpx;
	background-color: #fff;
	border-radius: 16rpx;

	.left {
		width: 180rpx;
		height: 170rpx;
		border-radius: 12rpx;

		.image {
			width: 180rpx;
			height: 170rpx;
			border-radius: 12rpx;
		}
	}

	.p-name {
		margin-bottom: 26rpx;
		padding-bottom: 18rpx;
		width: 100%;
		font-size: 17px;
		font-weight: 600;
		color: #333;
		line-height: 48rpx;
		border-bottom: 2rpx solid #f6f7fb;
	}

	.p-time,
	.p-phone,
	.p-no {
		margin-bottom: 5rpx;
	}

	.p-addr {
	}

	.right {
		flex: 1;
		width: 0;
		padding-left: 32rpx;
		font-size: 14px;
		color: #666;
		line-height: 40rpx;

		.image {
			width: 80rpx;
			height: 80rpx;
		}
	}
}

.label-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	font-size: 16px;
	color: #333;
	line-height: 44rpx;

	.item {
		padding: 20rpx 0;
		width: 50%;
		min-width: 30%;
		text-align: center;
	}

	.icon {
		margin-right: 5rpx;
		vertical-align: top;
	}
}

.site-info {
	margin-bottom: 20rpx;
	padding: 30rpx;
	font-size: 17px;
	color: #333;
	line-height: 52rpx;
	background-color: #fff;

	.h2-ttl {
		margin-bottom: 24rpx;
		font-size: 17px;
		font-weight: 600;
		color: #333;
		line-height: 48rpx;
	}
}

.node {
	margin: 20rpx 0 0 20rpx;
	font-size: 14px;
	color: #9b9b9b;
	line-height: 120rpx;
}

.sched-box {
	padding: 10rpx 50rpx;
}

.form-box {
	.form-item {
		@include mp-flex;
		// border-bottom: 20rpx solid #f5f7fa;

		&.border-bottom {
			border-bottom: 20rpx solid #f5f7fa;
		}

		.input-text {
			width: 100%;
			text-align: left;
		}
	}
}

.filter-box {
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 998;
	background-color: #fff;
}

.fiexd-btm {
	position: static;
	padding: 30rpx;
}
</style>
